<template>
  <div>
    <search-line @changeRouter="handleSearch">
      <input type="text" placeholder="搜索商品，发现更多优选" v-model="value" />
    </search-line>
    <!-- 路由容器放s/ -->
    <router-view></router-view>

    <div style="padding:0px 20px;">
      <div class="searchTab">
        <div class="hotSearch clearfix">
          <div class="leadWords fl">热门搜索</div>
          <ul v-if="hotwordsList.length" class="fl clearfix">
           
              <li 
                class="fla"
                v-for="(item,index) in hotwordsList"
                :key="index"
                :class="item.highlight?'red':''"
                @click="ClickValue(item.word)"
              >{{item.word}}</li>
  
          </ul>
        </div>
        <div class="goodsCategory clearfix">
          <div class="leadWords fl">商品分类</div>
          <ul v-if="categoryList.length" class="fl clearfix" @click="goCategory(item.id)">
            <li class="fl" v-for="item in categoryList" :key="item.id" @click='handelclick(item)'>{{item.name}}</li>
          </ul>
        </div>
      </div>
      <a href="youxuan://home" class="goApp">
        <span>去熊猫优选APP，找更多优惠</span>
      </a>
      <a href="http://www.cn-ecusc.org.cn/cert/aqkx/site/?site=quan.lukou.com" class="goSave">
        <img src="//static.anquan.org/static/outer/image/aqkx_83x30.png?id=quan.lukou.com?t=2" />
      </a>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import swiper1 from "@/components/Swiper1";
// //引入公共Bus
// import bus from "@/util/bus"
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      value: "",
      hotwordsList: [],
      categoryList: []
    };
  },
  components: {
    swiper1
  },
  methods: {
    handelclick(item){
      this.$router.push(`/tab/${item.id}`)
    },
    ...mapMutations(["UpdateInputValue"]),
    ClickValue(setvalue) {
      this.UpdateInputValue(setvalue); // 点击搜索热词直接跳转并传值给vuex的InputValue
      this.$router.push(`/s/${setvalue}`);
    },
    goCategory(id) {
      // 去分类页面
      // this.$router.push(`/tab${id}`)
    },
    handleSearch() {
      this.UpdateInputValue(this.value); // 输入框的值传给vuex中的InputValue
      this.$router.push(`/s/${this.value}`); // 修改完跳转路径
    }
  },
  mounted() {
    this.$store.commit("hide");
    this.$store.commit("hide1");
    axios.get("http://quan.lukou.com/api/search/home").then(res => {
      //   console.log(res.data.data)
      this.hotwordsList = res.data.data.hotWords.slice(0, 8); // 只需要前面8个
    });
    axios.get("http://quan.lukou.com/api/tabs?sa=").then(res => {
      //   console.log(res.data.data.list)
      this.categoryList = res.data.data.list.slice(1, 16);
    });
  },
  destroyed() {
    this.$store.commit("show");
    this.$store.commit("show1");
  }
};
</script>
<style scoped lang="scss">
.clearfix:after {
  content: "";
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0px;
  height: 0px;
  clear: both;
}
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul {
  list-style: none;
  //  display: flex;
  // justify-content: space-between;
  // flex-wrap: wrap
}
.fl {
  float: left;
  // margin-right: 10px;
  text-align: center
}
.fr {
  // float:right;//????????为什么
}
.fla {
  margin-right: 20px;
  display: block;
}
.leadWords {
  font-size: 16px;
  color: #877a73;
}
.hotSearch {
  .leadWords {
    margin: 40px 0px 30px 0px;
  }
  ul {
    display: flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
    li {
      padding: 6px 18px;
      background: #f5f5f5;
      // margin-right:26px;
      width: 40px;
      // padding: 20px 20px;
      height: 20px;
      
      margin-bottom: 26px;
      // margin-right: 10px;
      font-size: 13px;
      margin-right: 3px;
      border-radius: 10px;
    }
    .red {
      color: red;
    }
  }
}
.goodsCategory {
  .leadWords {
    margin: 24px 0px 30px 0px;
  }
  li {
    width: 25%;
    font-size: 16px;
    margin-bottom: 30px;
    // margin-right: 20px
  }
}
.goApp {
  display: block;
  text-align: center;
  margin: 34px 0px 170px;
  span {
    padding: 10px 30px;
    border: 1px solid red;
    color: red;
    border-radius: 60px;
    font-size: 18px;
  }
}
.goSave {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
</style>